<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态组件与v-once指令</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="app">
    <!--vue自带的标签，表示动态组件
        根据is绑定数据的变化，自动加载不同的组件-->
    <component :is="type"></component>
    <button @click="handleBtnClick">change</button>
</div>
<script>
    Vue.component('child-one', {
        template: '<div>child-one</div>'
    });
    Vue.component('child-two', {
        template: '<div>child-two</div>'
    });
    var app = new Vue({
        el: '#app',
        data: {
            type: 'child-one'
        },
        methods: {
            handleBtnClick: function () {
                this.type = this.type === 'child-one' ? 'child-two' : 'child-one';
            }
        }
    });
</script>
</body>
</html>